<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: head(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- treeview -->
    <link th:href="@{/static/admin/assets/js/bootstrap/bootstrap-treeview/css/bootstrap-treeview.css}"
          rel="stylesheet"/>

    <style type="text/css">
        .content-wrap {
            padding: 0px;
        }

        body {
            color: #9ea7b3;
            font-family: "Open Sans", Arial, sans-serif !important;
            font-size: 13px !important;
            line-height: 20px;
            overflow-x: hidden !important;
            min-height: 100%;
            z-index: -2;
            margin: 0px !important;
            background: url() no-repeat top center fixed;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        label.error {
            position: absolute;
            right: 18px;
            top: 5px;
            color: #ef392b;
            font-size: 12px;
        }

        .ico-list .fa {
            margin: 5px;
            padding: 5px;
            cursor: pointer;
            font-size: 18px;
            width: 28px;
            border-radius: 3px;
        }

        .ico-list .fa:hover {
            background-color: #1d9d74;
            color: #ffffff;
        }
    </style>

</head>
<body>

<div id="fcapp" class="content-wrap">
    <div class="row">
        <div class="col-sm-12">
            <div class="nest" id="elementClose">
                <div class="">
                </div>
                <div class="body-nest" id="element">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">类型：</label>
                                <div class="col-sm-8">
                                    <label class="radio-inline"><input type="radio" name="type" value="0"
                                                                       v-model="menu.type"> 目录</label>
                                    <label class="radio-inline"><input type="radio" name="type" value="1"
                                                                       v-model="menu.type"> 菜单</label>
                                    <label class="radio-inline"><input type="radio" name="type" value="2"
                                                                       v-model="menu.type"> 按钮</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">权限名称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="name" name="name"/>
                                </div>
                            </div>
                            <div v-if="menu.type == 1 || menu.type == 2" class="form-group">
                                <label class="col-sm-3 control-label ">上级菜单：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="hidden" id="pid" name="pid"/>
                                    <input class="form-control" readonly="true" type="text" id="pidName"
                                           onclick="selectMenuTree()"/>
                                </div>
                            </div>


                            <div v-if="menu.type == 1 || menu.type == 2" class="form-group">
                                <label class="col-sm-3 control-label ">权限URL：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="url" name="url"/>
                                </div>
                            </div>
                            <div v-if="menu.type == 1 || menu.type == 2" class="form-group">
                                <label class="col-sm-3 control-label ">权限关键字：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="perms" name="perms"
                                           placeholder="多个用逗号分隔，如：user:list,user:create"/>
                                </div>
                            </div>
                            <div v-if="menu.type != 2" class="form-group">
                                <label class="col-sm-3 control-label ">排序：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="number" id="orderNum" name="orderNum"/>
                                </div>
                            </div>
                            <div v-if="menu.type != 2" class="form-group">
                                <label class="col-sm-3 control-label ">图标：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" onfocus="showdrop();" type="text" id="icon"
                                           name="icon"/>
                                    <!--
                                    <code style="margin-top: 4px; display: block;">获取图标：https://fontawesome.com/v4.7.0/icons/</code>
                                     -->
                                    <div class="ms-parent" style="width: 100%;">
                                        <div class="icon-drop animated flipInX"
                                             style="display: none;max-height:200px;overflow-y:auto">
                                            <div data-th-include="admin/premission/icon"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">权限描述：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="descripion" name="descripion"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="form-control-static col-sm-offset-9">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>
<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<!--bootstarp threeView -->
<script th:src="@{/static/admin/assets/js/bootstrap/bootstrap-treeview/js/bootstrap-treeview.js}"
        type="text/javascript"></script>


<script type="text/javascript">
    $(function () {
        //初始化vue
        var vm = new Vue({
            el: "#fcapp",
            data: {
                "menu": {
                    type: 0
                }
            }

        });
        //验证方法
        $("#form-add").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20,
                    remote: {
                        url: rootPath + "/PremissionController/checkNameUnique",
                        type: "post",
                        dataType: "json",
                        dataFilter: function (data, type) {
                            if (data == "0")
                                return true;
                            else
                                return false;
                        }
                    }
                }, url: {
                    required: true,
                    minlength: 2,
                    maxlength: 100,
                    remote: {
                        url: rootPath + "/PremissionController/checkURLUnique",
                        type: "post",
                        dataType: "json",
                        dataFilter: function (data, type) {
                            if (data == "0")
                                return true;
                            else
                                return false;
                        }
                    }
                }, perms: {
                    required: true,
                    minlength: 2,
                    maxlength: 100,
                    remote: {
                        url: rootPath + "/PremissionController/checkPermsUnique",
                        type: "post",
                        dataType: "json",
                        dataFilter: function (data, type) {
                            if (data == "0")
                                return true;
                            else
                                return false;
                        }
                    }
                }

            },
            messages: {
                "name": {
                    remote: "权限名字已经存在"
                },
                "url": {
                    remote: "权限地址已经存在"
                },
                "perms": {
                    remote: "权限关键字已经存在"
                }
            },
            submitHandler: function (form) {
                add();
            }
        });

    })

    //添加方法
    function add() {
        var dataFormJson = $("#form-add").serialize();
        $.ajax({
            cache: true,
            type: "POST",
            url: rootPath + "/PremissionController/add",
            data: dataFormJson,
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.saveSuccess(data);
            }
        });
    }


    /*菜单管理-修改-选择菜单树*/
    function selectMenuTree() {
        var url = rootPath + "/PremissionController/three";
        $.modal.open("选择菜单", url, '380', '380');
    }


    //显示图标
    function showdrop() {
        $(".icon-drop").show();
    }

    $(function () {

        $("#form-add").click(function (event) {
            var obj = event.srcElement || event.target;
            if (!$(obj).is("input[name='icon']")) {
                $(".icon-drop").hide();
            }
        });
        $(".icon-drop").find(".ico-list i").on("click", function () {
            $('#icon').val($(this).attr('class'));
        });

    });


</script>


</body>


</html>
